<template>
  <div class="page luckdraw-coin-market">
    <div class="luckdraw-coin-market-container">
      <div class="data-section">
        <img :src="icons.rateBg" mode="widthFix" class="data-bg"/>
        <div class="box">
          <div class="box-container">
            <p class="label">今日兑换率</p>
            <div class="detail">
              <span>1 金币 = {{coinRate}} 元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="menu-section">
        <m-menu :menuList="['ta要买', 'ta要卖']" @onClick="onMenuListClick"></m-menu>
      </div>
      <div class="list-section">
        <market-list v-for="(item, i) in resultList" :key="i" :listData="item"></market-list>
      </div>
      <div class="load-more">
        <span v-if="showNoMore">没有更多了</span>
        <span v-if="showLoadMore">加载中...</span>
      </div>
      <div class="btn-section">
        <div class="btn-inner">
          <m-button text="我要发布" @onClick="onReleaseBtnClick"></m-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MButton from 'comp/m-button'
import MMenu from 'comp/m-menu'
import MarketList from 'comp/market-list'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButton,
    MMenu,
    MarketList
  },
  data () {
    return {
      menuIndex: 0,
      resultList: [],
      pageNumber: 1,
      showNoMore: false,
      showLoadMore: false,
      coinRate: '',
      icons: {
        rateBg: `${require('static/images/rate-bg.png')}`
      },
    }
  },
  mounted () {
    this.resetData()
    this.queryConfig()
    this.queryCoinOrderList()
  },
  onReachBottom () {
    // 页面上拉触底事件的处理函数
    if (this.showLoadMore) {
      this.queryCoinOrderList()
    }
  },
  methods: {
    onListClick (id) {
      wx.navigateTo({
        url: `/pages/coin-market-detail/main?orderId=${id}`,
      })
    },
    /**
     * 切换买卖菜单
     */
    onMenuListClick (i) {
      this.menuIndex = i
      this.resultList = []
      this.pageNumber = 1
      this.showNoMore = false
      this.showLoadMore = false
      this.queryCoinOrderList()
    },
    onReleaseBtnClick () {
      wx.navigateTo({
        url: '/pages/coin-release/main',
      })
    },
    /**
     * 获取兑换率
     */
    async queryConfig () {
      const ret = await this.$store.dispatch('queryConfig')
      if (ret) {
        this.coinRate = ret.goldRate.toFixed(2)
      }
    },
    /**
     * 查询交易订单列表
     */
    async queryCoinOrderList () {
      let pageNumber = this.pageNumber
      const ret = await this.$store.dispatch('queryCoinOrderList', {
        type: this.menuIndex === 0 ? 2 : 1,
        page: pageNumber++,
        rows: 20
      })
      const arr1 = this.resultList
      const arr2 = ret.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 无参与用户
        this.showNoMore = false
        this.showLoadMore = false
      } else {
        if (ret.list.length < 20) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.resultList = arr1.concat(arr2)
      this.pageNumber = pageNumber
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-coin-market {
  &-container {
    padding-bottom: 146rpx;
  }
  .data-section {
    position: relative;
    color: #fff;
    background-color: #fff;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    .data-bg {
      display: block;
      width: 100%;
    }
    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 230rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .label {
      font-size: 30rpx;
    }
    .detail {
      font-size: 34rpx;
      padding-top: 20rpx;
    }
  }
  .list-section {
    padding: 0 20rpx 20rpx;
  }
  .load-more {
    text-align: center;
    color: #488ff0;
    font-size: 30rpx;
    padding: 30rpx 0 40rpx;
  }
  .btn-section {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 126rpx;
    background-color: #fff;
    border-top: 1rpx solid #ddd;
    .btn-inner {
      flex: 1;
      padding: 20rpx 20rpx;
      &:nth-child(2) {
        padding-left: 0;
      }
    }
  }
}
</style>
